<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片GPS轨迹图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script src="//libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<style>
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:100%;}
</style>

<body>
    <div id="allmap"></div>

    <script type="text/javascript">
        // window.onload = function () {
            var map = new BMap.Map("allmap");
            var pointArr = eval('{{data_new_map|safe }}');
             // 坐标点数据
            // var pointArr = [{lng: 120.37330074071, lat: 31.498294737149},{lng: 120.57330074071, lat: 31.498294737149},{lng: 120.87330074071, lat: 31.498294737149},{lng: 121.37330074071, lat: 31.498294737149}];
            map.centerAndZoom(new BMap.Point(pointArr[0].lng, pointArr[0].lat), 13);
            map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件  
            map.addControl(new BMap.ScaleControl()); // 添加比例尺控件  
            map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件  
            map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
	        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            map.clearOverlays(); //清除地图上所有的覆盖物  
            var driving = new BMap.DrivingRoute(map); //创建驾车实例  
           
            var trackPoint = [];
            for (var i = 0, j = pointArr.length; i < j; i++) {
                trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
            }
            for (var i = 0; i < trackPoint.length; i++) {
                if (i != trackPoint.length - 1) {
                    driving.search(trackPoint[i], trackPoint[i + 1]);
                }
            }
            driving.setSearchCompleteCallback(function () {
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组  

                var polyline = new BMap.Polyline(pts);
                map.addOverlay(polyline);

                // 画图标、想要展示的起点终点途经点
                for (var i = 0; i < trackPoint.length; i++) {
                    var lab;
                    if (i == 0) {
                        lab = new BMap.Label("起点", {
                            position: trackPoint[i]
                        });
                    } else if (i == trackPoint.length - 1) {
                        lab = new BMap.Label("终点", {
                            position: trackPoint[i]
                        });
                    } else {
                        // lab = new BMap.Label("途径点",{position:trackPoint[i]}) 
                    }
                    var marker = new BMap.Marker(trackPoint[i])
                    var filename = pointArr[i].filename;
                    var time = pointArr[i].time;
                    addClickHandler(filename,time,marker);
                    map.addOverlay(marker);
                    map.addOverlay(lab);
                }
                map.setViewport(trackPoint);
            });
        // }
    function addClickHandler(filename,time,marker){
		marker.addEventListener("click",function(e){
			openInfo(filename,time,e)}
		);
	}
	function openInfo(filename,time,e){
        var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+filename+"</h4>"+"<h5 style='margin:0 0 5px 0;padding:0.2em 0'>"+time+"</h5>"
        + "<img style='float:right;margin:4px' id='imgDemo' src='static/img/"+filename+"' width='400' height='400' title='None'/>"+"</div>";
        // + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'></p>"
        
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
    </script>

</body>

</html>
</body>

</html>